<template>
    <div class="head">
      <div>GPG<i id="xh"  class="iconfont icon-xinhao-signal-fill "></i></div>
      <div style="margin-right: 40px;font-weight: 500;">徒步</div>
      <div><i class="iconfont icon-yinlefuhao"></i></div>
    </div>
    <div class="center1">
      <span class="nugl">0.00</span>
      <span class="gl" style="color: #676767;">公里</span>
    </div>
    <div class="center2">
      <div class="item">
        <i class="iconfont icon-yibiaopan_yuan_B"></i>
        <div class="ite">0</div>
        <span  style="color: #949494;font-size: 14px;">徒步步数</span>
      </div>
      <div class="item">
        <i class="iconfont icon-shizhongfill"></i>
        <div class="ite">00:01</div>
        <span style="color: #949494;font-size: 14px;">总计时间</span>
      </div>
      <div class="item">
        <i class="iconfont icon-huoyan"></i>
        <div class="ite">0.0</div>
        <span style="color:#949494;font-size: 14px;">消耗千卡</span>
      </div>
    </div>
    <div class="center3">
      <div class="suokou">
        <i class="iconfont icon-suo"></i>
      </div>
      <div class="bjk-tu"></div>
      <div class="shezhi">
        <i class="iconfont icon-chilun"></i>
      </div>
    </div>
    <div class="bjk-ribtn">
      <button class="btn">向右滑动暂停</button>
      <svg t="1714370835418" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3337"><path d="M763.647509 470.785079L283.648445 4.353988c-6.143988-5.887989-15.871969-5.887989-21.759957 0.511999l-14.335972 14.847971c-5.887989 6.143988-5.631989 16.127969 0.511999 22.015957l479.999064 466.431091c1.279998 1.279998 1.535997 2.815995 1.535997 3.839992 0 1.023998-0.256 2.559995-1.535997 3.839993L247.808515 982.272081c-6.143988 5.887989-6.399988 15.871969-0.511999 22.015957l14.591972 14.847971c5.887989 6.143988 15.61597 6.399988 21.759957 0.511999l479.999064-466.43109c11.263978-10.751979 17.407966-25.343951 17.407966-41.21592s-6.143988-30.207941-17.407966-41.215919z" p-id="3338" data-spm-anchor-id="a313x.search_index.0.i3.5e623a81Y0Swaa" class="selected" fill="#fff"></path></svg>
    </div>

  
  </template>
  
  <script lang="ts" setup>
      import { useRoute, useRouter} from 'vue-router';
      const route=useRoute();
      const router=useRouter();
      console.log(route.query.id);
  </script>
  
  <style scoped>
  .head{
    display: flex;
    font-size:20px ;
    justify-content: space-between;
    padding: 10px;
  }
  i{
    font-size: 20px;
  }
  #xh{
    margin-left: 10px;
    color: #898989;
  }
  .gl{
    font-size: 20px;
    font-weight: 600;
    /* margin-left: 2px; */
    margin-top: 85px;
  }
  .nugl{
    font-size: 80px;
    margin-top: 25px;
    font-weight:200;
    /* margin-top: 10px; */
    /* font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-family:fantasy;
  }
  .center1{
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .icon-yibiaopan_yuan_B{
    color: #ccc;
  }
  .icon-shizhongfill{
    color: #ccc;
  }
  .icon-huoyan{
    color:#ccc
  }
  .center2{
    display: flex;
    justify-content: space-between;
    /* padding: 40px; */
    margin-top: 55px;
  }
  .item{
    font-size: 16px;
    width: 100%;
    text-align: center;
    width: 125px;
   
  }
  .btn{
    width: 280px;
    height: 58px;
    border-radius: 30px;
    font-size: 20px;
    color: aliceblue;
    background-color: #12d59d;
    border: none;
   
  }
  .bjk-ribtn{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 100px;
    position: relative;
  }
  .ite{
    font-family:fantasy;
    font-weight: 500;
    font-size: 20px;
    margin: 10px 0;
  }
  .center3{
    display: flex;
    height: 150px;
    padding: 60px 0;
    box-sizing: border-box;
    width: 100%;
    justify-content: space-evenly;
  }
 .suokou{
  border: 1px solid #333;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-top: 12.5px;
  line-height: 35px;
  text-align: center;
 }
 .shezhi{
  border: 1px solid #333;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-top: 12.5px;
  text-align: center;
  line-height: 35px;
 
 }
 .bjk-tu{
  
  border: 3px solid #fff;
  /* 设置阴影 */
  background-color: #898989;
  
  box-shadow: 0 0 10px #aaa;
  width: 60px;
  height: 60px;
  border-radius: 50%;
 }
 .icon-suo{
  font-size: #666666;
 }
 .icon-chilun{
  font-size: #666666;
 }
 .icon{
  width: 16px;
  font-weight: 700;
  position: absolute;
  left: 100px;
  top: 20px;
 }

  </style>